<template>
  <div>
    <div class="home-item-wrapper">
      <div class="home-item-panel">
        <HomeTodoCard :cardItems="cardItems1"/>
      </div>
    </div>
    <div class="home-item-wrapper">
      <div class="home-item-panel">
        <HomeTodoCard :cardItems="cardItems2"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import HomeUtils from '../config/home-utils'
import HomeTodoCard from '../items/HomeTodoCard.vue'

const props = defineProps({
  loading: { type: Boolean, default: false },
  todoData: { type: [ Object, Array ] }
})

const cardItems1 = ref([])
const cardItems2 = ref([])

watch(
  () => props.todoData,
  (newValue, oldValue) => {
    const {
      resultReviewProjItem, resultReviewTaskItem,
      resultReserveItem, resultStandbyItem
    } = HomeUtils.tranfAgencyData(newValue)
    cardItems1.value = [ resultReviewProjItem, resultReviewTaskItem ]
    cardItems2.value = [ resultReserveItem, resultStandbyItem ]
  },
  {deep: false, immediate: false}
)

</script>

<style lang="scss" scoped>
</style>
